<!DOCTYPE html>
  <div id="treegrid_demo">
    		<!-- 工具栏 -->
		<div id="toolbar" class="btn-group">
			<button onclick="addclick()" type="button" class="btn btn-default">
				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
			</button>
			<button data-bind="click:editClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
			</button>
			<button data-bind="click:deleteClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
			</button>
			
		</div>
    
    <table id="table"  data-bind="bootstrapTable:$root">
    	<thead>
    		<tr>
				<th data-checkbox="true"></th>
				<th data-field="name">名称</th> 
				<th data-field="url">地址</th> 
				<th data-field="role" data-formatter="roleFormatter">权限</th> 
				<th data-field="idx1">排序</th> 
				<th data-field="type" data-formatter="typeFormatter">主页种类</th>
    		</tr>
    	</thead>
    </table>
  </div>

<script type="text/javascript">
  var $table = $('#table');

  $(function() {
	var data =  {
		tableParams : {
			toolbar:'#toolbar',
			url : 'menu/list',
			pagination:false,
			sidePagination: 'server',
			treeShowField: 'name',
			singleSelect:true,
			sortName:'idx1',
			parentIdField: 'parentId',
			onLoadSuccess: function(data) {
				$table.treegrid({
					//initialState: 'collapsed',
					treeColumn: 1,
					// expanderExpandedClass: 'glyphicon glyphicon-minus',
					// expanderCollapsedClass: 'glyphicon glyphicon-plus',
					onChange: function() {
					 	$table.bootstrapTable('resetWidth');
					}
				});
			}
   	    },
   	    urls : {
   	    	delete : 'menu/delete',
   	    	update : 'menu/edit',
   	    	add : 'menu/edit',
   	    	search:'menu/search'
   	    },
   	    queryCondition : {
   	    	name : '',
   	    	username : ''
   	    }
   	};
	ko.applyBindings(new BsTableViewModel(data),document.getElementById('treegrid_demo'));	
});
  
  function roleFormatter(value,row,index){
	  return value?value.name:'';
  }
  
  function addclick(){
	var selectRows=$table.bootstrapTable('getSelections');
   	var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>');
	if(selectRows&&selectRows.length==1){
		var parentId=selectRows[0].id;
        dialog.load('menu/edit',{parentId:parentId});
	}else{
        dialog.load('menu/edit');
	}
	$("body").append(dialog);
	dialog.modal().on('hidden.bs.modal', function () {
	    //关闭弹出框的时候清除绑定(这个清空包括清空绑定和清空注册事件)
	    dialog.remove();
	    $table.bootstrapTable('refresh');
	});

  }
  
  function typeFormatter(value,row,index){
	  return value==null?'':value==0?'管理员':'普通用户';
  }
</script>
